.page {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--themeBgColor);

    .nav {
        width: 100vw;
        background-color: #fff;
    }
}

.header-box {
    height: 85rpx;
    width: 700rpx;
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
        display: flex;
        align-items: center;

        .tip {
            position: relative;
            width: 180rpx;
            font-size: 28rpx;
            text-align: center;
            // background-color: pink;

            .arrow-icon {
                transform: rotate(180deg);
                transition: All 0.1s ease-in-out;
            }

            .toggle-box {
                position: absolute;
                top: 82rpx;
                width: 150rpx;
                background-color: #fff;
                border-radius: 10rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                z-index: 1;
                box-shadow: 1rpx 1rpx 10rpx 0 #d8d8d8;


                .item {
                    width: 150rpx;
                    padding: 15rpx 0;

                    &:active {
                        background-color: #f5f5f5;
                    }
                }

                .item1 {
                    color: #7367f0;
                }

                .divider {
                    width: 150rpx;
                    height: 1rpx;
                    background-color: #f2f2f2;
                }

                .triangle {
                    position: absolute;
                    top: -28rpx;
                    left: 20rpx;
                    border-color: transparent transparent #fff transparent;
                    border-style: solid;
                    border-width: 15rpx 12rpx 15rpx 12rpx;
                    height: 0;
                    width: 0;
                }
            }
        }

        .input-box {
            height: 85rpx;
            width: 400rpx;
            display: flex;

            .input {
                height: 85rpx;
                width: 370rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #161616;
                // background-color: #fff;
                padding: 0 !important;
                border-radius: 20rpx;
            }

            .close-icon {
                height: 85rpx;
                width: 85rpx;
                color: #bbbbbb;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .right {
        width: 135rpx;
        height: 70rpx;
        font-size: 26rpx;
        color: #fff;
        margin-right: 5rpx;
        background-color: #7367f0;
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &:active {
            scale: (.99);
        }
    }
}

.search {
    position: relative;
    height: 100rpx;
    width: 700rpx;
    padding: 0 25rpx;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1rpx 1rpx 5rpx 0 #f5f5f5;
    z-index: 1;



    .input {
        width: 680rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }

    .van-search {
        padding: 0rpx;
        background-color: var(--themeBgColor) !important;
    }

    .van-search__content {
        padding-left: 20rpx;
        background-color: #fff;
    }

    .van-search__action {
        padding: 0;
    }

    .van-search__content--round {
        border-radius: 20rpx;
    }
}

.content {
    height: 500rpx;

    .user {
        position: relative;
        width: 640rpx;
        font-size: 26rpx;
        color: #494848;
        background-color: #fff;
        padding: 30rpx;
        margin-top: 50rpx;
        border-radius: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;
            align-items: center;

            .image {
                width: 100rpx;
                height: 100rpx;
            }

            .name_mobile {
                font-size: 36rpx;
                color: #6b6b6b;
                margin-left: 30rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: flex;
                flex-direction: column;

                .mobile {
                    font-size: 28rpx;
                    color: #9c9c9c;
                    margin-top: 6rpx;
                }
            }
        }

        .right {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 90rpx;
            height: 90rpx;
            font-size: 36rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}


.footer {
    // position: absolute;
    // bottom: 150rpx;
    margin-top: 100rpx;
    height: 100rpx;
    display: flex;
    align-items: center;

    .btn {
        width: 700rpx;
        height: 90rpx;
        font-size: 28rpx;
        color: #fff;
        border-radius: 20rpx;
    }
}